<template>
  <div class="dashboard-editor-container">
    <panel-group :list="PanelGroup"></panel-group>
    <to-do v-model="setline" ref="todo">
      <template slot="tabs">
        <el-radio-group v-model="setline" size="small" @change="handleSetLineChartData">
          <el-radio-button border :label="`all`">会员总量</el-radio-button>
          <el-radio-button border :label="`ONE`">年费会员</el-radio-button>
          <el-radio-button border :label="`FREE`">试用会员</el-radio-button>
          <el-radio-button border :label="`QUAR`">季度会员</el-radio-button>
          <el-radio-button border :label="`HARF`">半年会员</el-radio-button>
        </el-radio-group>
      </template>
    </to-do>
  </div>
</template>

<script>
import handleSetLineChartData from '@/util/chart';

export default {
  name: 'StatisticsText',
  mixins: [handleSetLineChartData],
  data () {
    return {
      api: 'memberChart',
      setline: 'all',
      PanelGroup: [{
        name: '会员总量',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0
        }
      }, {
        name: '试用会员',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0
        }
      }, {
        name: '季度会员',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0
        }
      }, {
        name: '半年会员',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0
        }
      }, {
        name: '包年会员',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0
        }
      }, {
        name: 'Andriod 会员',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0
        }
      }, {
        name: 'IOS 会员',
        viewStatistics: {
          allData: 0,
          nData: 0,
          yData: 0,
          tb: 0
        }
      }],
      chartData: {
        time: [],
        total: []
      }
    };
  },
  created () {
    this.getData();
  },
  methods: {
    async getData () {
      const { code, data, message } = await this.$API.memberStatistics();

      if (code === 200) {
        const { viewStatistics } = data;

        if (viewStatistics) {
          this.$set(this.PanelGroup, 0, {
            name: '会员总量',
            viewStatistics: {
              allData: viewStatistics.all.total,
              nData: viewStatistics.all.today,
              yData: viewStatistics.all.yesterday,
              tb: ((viewStatistics.all.today - viewStatistics.all.yesterday) / (viewStatistics.all.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 1, {
            name: '试用会员',
            viewStatistics: {
              allData: viewStatistics.free.total,
              nData: viewStatistics.free.today,
              yData: viewStatistics.free.yesterday,
              tb: ((viewStatistics.free.today - viewStatistics.free.yesterday) / (viewStatistics.free.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 2, {
            name: '季度会员',
            viewStatistics: {
              allData: viewStatistics.quar.total,
              nData: viewStatistics.quar.today,
              yData: viewStatistics.quar.yesterday,
              tb: ((viewStatistics.quar.today - viewStatistics.quar.yesterday) / (viewStatistics.quar.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 3, {
            name: '半年会员',
            viewStatistics: {
              allData: viewStatistics.harf.total,
              nData: viewStatistics.harf.today,
              yData: viewStatistics.harf.yesterday,
              tb: ((viewStatistics.harf.today - viewStatistics.harf.yesterday) / (viewStatistics.harf.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 4, {
            name: '包年会员',
            viewStatistics: {
              allData: viewStatistics.one.total,
              nData: viewStatistics.one.today,
              yData: viewStatistics.one.yesterday,
              tb: ((viewStatistics.one.today - viewStatistics.one.yesterday) / (viewStatistics.one.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 5, {
            name: 'Andriod 会员',
            viewStatistics: {
              allData: viewStatistics.android.total,
              nData: viewStatistics.android.today,
              yData: viewStatistics.android.yesterday,
              tb: ((viewStatistics.android.today - viewStatistics.android.yesterday) / (viewStatistics.android.yesterday || 1) * 100).toFixed(2),
            }
          });
          this.$set(this.PanelGroup, 6, {
            name: 'IOS 会员',
            viewStatistics: {
              allData: viewStatistics.ios.total,
              nData: viewStatistics.ios.today,
              yData: viewStatistics.ios.yesterday,
              tb: ((viewStatistics.ios.today - viewStatistics.ios.yesterday) / (viewStatistics.ios.yesterday || 1) * 100).toFixed(2),
            }
          });
        }
      } else {
        this.$message.error(message);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.dashboard-editor-container {
  padding: 5px 15px 25px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
